// 任务列表
<template>
  <div>
    <div class="box">
      <el-card>
        <el-form class="searchForm" :inline="true" :model="queryForm" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="项目名称">
                <el-input v-model="queryForm.title" placeholder="请输入项目名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="来源">
                <el-select v-model="queryForm.perl" placeholder="请选择来源"> </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="级别">
                <el-select v-model="queryForm.dept" placeholder="请选择级别"> </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分类">
                <el-input v-model="queryForm.Classification" placeholder="请输入分类" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务标题">
                <el-input v-model="queryForm.TaskTitle" placeholder="请输入任务标题" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="完成标准">
                <el-input v-model="queryForm.Standard" placeholder="请输入完成标准" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="具体任务">
                <el-input v-model="queryForm.SpecificTasks" placeholder="请输入具体任务" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作检举">
                <el-input v-model="queryForm.WorkReport" placeholder="请输入工作检举" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="填报时间">
                <el-date-picker
                  v-model="queryForm.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 250px; background-color: transparent"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="标志性成果">
                <el-input v-model="queryForm.Results" placeholder="请输入标志性成果" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="责任部门">
                <el-input v-model="queryForm.Responsibility" placeholder="请输入责任部门" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="要求完成时间">
                <el-date-picker
                  v-model="queryForm.time1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 250px; background-color: transparent"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="完成进展">
                <el-input v-model="queryForm.Progress" placeholder="请输入完成进展" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="pageChange(1)">查询</el-button>
                <el-button type="primary" @click="onAdd">添加</el-button>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button type="primary" @click="onCancel">取消提交</el-button>
                <el-button type="primary" @click="onApprovalRecord">审批记录</el-button>
                <el-button type="primary" @click="onDel">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%" height="500" border @selection-change="handleSelectionChange"
          >>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="title" label="项目名称" min-width="250" align="center">
            <template slot-scope="scope">
              <el-link type="success" @click="onlinktitle(scope.row)">{{ scope.row.title }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="Classification" label="分类" min-width="180" align="center"> </el-table-column>
          <el-table-column prop="TaskTitle" label="任务标题" min-width="300">
            <template slot-scope="scope">
              <el-link type="success" @click="onlinkTaskTitle(scope.row)">{{ scope.row.TaskTitle }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="SpecificTasks" label="具体任务" min-width="300"> </el-table-column>
          <el-table-column prop="WorkReport" label="工作检举" min-width="300"> </el-table-column>
          <el-table-column prop="Standard" label="完成标准" min-width="300"> </el-table-column>
          <el-table-column prop="LatestProgress" label="最新进度" min-width="180"> </el-table-column>
          <el-table-column prop="Status" label="状态" min-width="180" align="center"> </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!--弹出框 -->
    <el-dialog title="提交审批" :visible.sync="dialogFormVisible">
      <span>确定要提交此单据</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TasklistAdd from './TasklistDialog/TasklistAdd.vue'
export default {
  components: { TasklistAdd },
  data() {
    return {
      form: {},
      queryForm: {
        pagenum: 1,
        pagesize: 20,
        title: '',
        perl: '',
        dept: '',
        Classification: '',
        TaskTitle: '',
        time: '',
        SpecificTasks: '',
        WorkReport: '',
        Standard: '',
        Results: '',
        Responsibility: '',
        time1: '',
        Progress: ''
      },
      dialogFormVisible: false,
      multipleSelection: [],
      tableData: [
        {
          title: '2025xx行动',
          Classification: '定方向',
          TaskTitle: '深入谋划十五五发展规划',
          SpecificTasks: '深入子公司走访调研，进一步把握相关业务的产业政策、市场形势、发展趋势......',
          WorkReport:
            '1.指导各子公司开展“十五五”规划前期分析，通过开展行业内外走访调研等方式，切实把握好各业务产业政策.',
          Standard:
            '各子公司初步明晰本企业“十五五”发展思路，集团初步明确“十五五”发展思路，形成集团公司“十五五”发展总体规划.....',
          LatestProgress: '',
          Status: '草拟'
        },
        {
          title: '2025xx行动',
          Classification: '定方向',
          TaskTitle: '深入谋划十五五发展规划',
          SpecificTasks: '以集团总体规划（即集团五年规划）为指引，加快健全包括各管理条线职能规......',
          WorkReport: '搭建集团战略规划体系，提升集团战略支撑能力。',
          Standard:
            '各部门、各子公司根据集团公司“十五五”规划编制总体部署，同步开展相关职能条线、业务板块“十五五”规划研究制定工作......',
          LatestProgress: '',
          Status: '草拟'
        }
      ]
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    pageChange() {},
    onAdd() {
      this.disableds = false
      this.$router.push('/Three/Tasklist/TasklistAdd')
    },
    SonCancel(val) {
      this.dialogVisible = val
    },
    onSubmit() {
      this.dialogFormVisible = true
    },
    onCancel() {},
    onApprovalRecord() {},
    onDel() {},
    onlinktitle() {
      this.$router.push('/Three/Tasklist/ImportDetailsC')
    },
    onlinkTaskTitle() {
      this.disableds = true
      this.$router.push('/Three/Tasklist/TasklistAddC')
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}
.box >>> .el-select {
  width: 93%;
}
.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
</style>
